<template>
  <view class="container">
	<view class="card">
		<view class="card-header">录音名称</view>
		<view class="card-test">
			<text class="test-left">使用中</text>
			<text class="test-right">时长3分钟</text>
		</view>
	</view>
    <view class="card">
      <view class="card-header">语音转文字的内容</view>
      <view class="card-content">
        <text class="text-content">{{ params.text || '正在转换中...' }}</text>
      </view>
    </view>

    <view class="card">
      <view class="card-header">智能摘要</view>
      <view class="card-content">
        <text class="text-content">{{ params.abstracts || '生成摘要中...' }}</text>
      </view>
    </view>

    <view class="card">
      <view class="card-header">AI分析</view>
      <view class="card-content">

        <image :src="'data:image/png;base64,' + params.emotion" mode="aspectFit" class="text-ai"></image>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { findFileById } from '@/api/common.js'
const params = ref({})

onLoad((options) => {
  console.log('加载页面，参数:', options);
  findFileById(options.id).then(res => {

    params.value = res.data[0]
  }).catch(err => {
    console.error('获取文件信息失败:', err);
  })

})
</script>

<style lang="scss" scoped>
.text-ai {
  height: 300px;
  width: 100%;
}

.container {
  padding: 24rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.card {
  background: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  &-header {
    padding: 28rpx;
    font-size: 34rpx;
    color: #333;
    border-bottom: 1rpx solid #eeeeee;
    font-weight: 500;
  }

  &-content {
    padding: 28rpx;
    min-height: 200rpx;
  }
  
  .card-test{
	  padding: 10rpx 0;
	  display: flex;
	  margin-left: 30rpx;
	  .test-left{
		  color: #4684b3;
		  // border: 1rpx solid #eeeeee;
		  font-size: 24rpx;
	  }
	  .test-right{
		  margin-left: 10rpx;
		  color: #9E9E9E;
		  font-size: 24rpx;
	  }
  }
}
</style>
